<template>
	<base-page class="base-form" title="已办任务" @back="goBack">
		<view class="filter-box" style="padding: 10px 12px; background: white">
			<u-search class="search" shape="square" bg-color="#F7F8FA" :show-action="false"
				placeholder="请输入流程名称" v-model="searchString" @search="onRefresh" />
		</view>
		<view class="main-box" style="padding: 16px">
			<custom-list
				ref="cardList"
				height="100%"
				:isLoading="tableWidget.loading"
				:finished="tableWidget.finished"
				:dataList="tableWidget.dataList"
				@load="tableWidget.loadDataList"
			>
				<view class="task-item" v-for="(item ,index) in tableWidget.dataList" :key="index">
					<TaskCard :cardData="getCardData(item)" @click.native="goTaskDetails(item)">
						<template #menu>
							<view class="card-menu-box" type="flex" justify="space-between" align="center">
								<view class="user-box">
									<u-avatar :size="48" mode="circle" style="margin-right: 10rpx;"
										:src="item.headImageUrl"
										:text="(item.headImageUrl == null || item.headImageUrl === '') ? item.showName : undefined" />
									<text class="userName">{{ item.showName }}</text>
								</view>
								<text style="color: #999999; font-size: 24rpx;">{{item.createTime}}</text>
							</view>
						</template>
					</TaskCard>
				</view>
			</custom-list>
		</view>
	</base-page>
</template>

<script>
	import TaskCard from '../components/taskCard.vue';
	import { DropdownWidget, TableWidget } from '@/utils/widget.js';
	import {
		FlowOperationController
	} from '@/api/flowController.js';
	import {
		getHeadImageUrl
	} from '@/utils';

	export default {
		name: 'formMyApprovedTask',
		components: {
			TaskCard
		},
		data() {
			return {
				searchString: '',
				tableWidget: new TableWidget(this.loadTableData, this.loadTableDataVerify, true)
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: '已办任务'
			});
		},
		onShow() {
			this.$nextTick(() => {
				if (this.$refs.cardList) {
					this.$refs.cardList.reset();
				}
			})
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			goTaskDetails(row) {
				FlowOperationController.viewHistoricTaskInfo(this, {
						taskId: row.id,
						processDefinitionId: row.processDefinitionId,
						processInstanceId: row.processInstanceId
					})
					.then(res => {
						const data = {
							processDefinitionKey: row.processDefinitionKey,
							taskId: row.id,
							processInstanceId: row.processInstanceId,
							processDefinitionId: row.processDefinitionId,
							formId: res.formId,
							routerName: res.mobileRouterName || res.routerName,
							readOnly: true,
							flowEntryName: row.processDefinitionName,
							processInstanceInitiator: row.showName,
							taskName: row.name,
							headImageUrl: row.headImageUrl,
							// 在已办理任务中仅显示加签、减签和撤销操作
							operationList: res.operationList.filter(item => {
								return item.type === this.SysFlowTaskOperationType.CO_SIGN || item.type ===
									this.SysFlowTaskOperationType.REVOKE || item.type === this
									.SysFlowTaskOperationType.SIGN_REDUCTION;
							})
						}
						uni.navigateTo({
							url: '/views/workflow/handleFlowTask/index?passData=' + encodeURIComponent(JSON
								.stringify(data))
						});
					})
			},
			onRefresh() {
				this.pageNum = 1;
				if (this.$refs.cardList) this.$refs.cardList.reset();
			},
			getListParent(sender) {
				return sender.$parent.$parent;
			},
			getCardData(cardData) {
				return {
					title: cardData.processDefinitionName,
					subTitle: [
						'工单编号：' + (cardData.workOrderCode || ''),
						'当前任务：' + (cardData.name || ''),
						'审批操作：' + this.SysFlowTaskOperationType.getValue(cardData.approvalType),
						'审批时间：' + cardData.endTime
					]
				}
			},
			loadTableDataVerify() {
				return true;
			},
			loadTableData(params) {
				if (params == null) params = {};
				params = {
					...params,
					processDefinitionName: this.searchString
				}
				return new Promise((resolve, reject) => {
					FlowOperationController.listHistoricTask(this, params).then(res => {
						resolve({
							dataList: res.dataList.map(item => {
								return {
									...item,
									headImageUrl: getHeadImageUrl(item)
								}
							}),
							totalCount: res.totalCount
						});
					}).catch(e => {
						reject(e);
					});
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.search {
		flex: 1;
	}

	.card-menu-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1px solid #f0efef;
		padding-top: 8px;
		margin-top: 10px;
	}

	.card-menu-box .user-box {
		height: 24px;
		display: flex;
		align-items: center;
	}

	.card-menu-box .user-box .text {
		color: #666666;
		font-size: 12px;
	}

	.userName {
		font-size: 12px;
		color: #666666;
		font-weight: 400;
	}

	.list {
		flex-grow: 1;
		flex-shrink: 1;
		padding: 32rpx;
		position: relative;
	}

	.task-item+.task-item {
		margin-top: 15px;
	}
</style>